/**
 * Created by yhy on 2018/11/21.
 * 接收数据格式{url:"",title:""} immutable数据
 */

import React,{Component} from 'react'
import Immutable from 'immutable'
import {Modal} from 'antd';


export default class ImageList extends Component{

    constructor(props){
        super(props);
        this.state = {
            visible:false,
            url:""
        };
    }

    static defaultProps={
        data:Immutable.List()
    }
    render(){
       const {visible,url} = this.state;
        return   <div className="right-info-pic-info">
            <div className="clearfix">
                {this._renderItems()}
            </div>
            <Modal
                title="图片预览"
                wrapClassName="vertical-center-modal"
                visible={visible}
                onCancel={this._close}
                footer={null}
            >
                <img width="100%" src={url} alt=""/>
            </Modal>
        </div>
    }


    _renderItems=()=>{
        let data = this.props.data||Immutable.List();
        return data.map((item)=>{
            return <div className="ant-upload-list ant-upload-list-picture-card">
                <div className="ant-upload-list-item ant-upload-list-item-done">
                    <div className="ant-upload-list-item-info">
                        <a className="ant-upload-list-item-thumbnail">
                            <img src={item.get('url')} />
                        </a>
                        <span className="ant-upload-list-item-name" title={item.get('title')||""}>{item.get('title')||""}</span>
                    </div>
                    <span className="ant-upload-list-item-actions" onClick={() => this._showImage(item.get('url'))}>
                            <a title="预览文件"><i className="anticon anticon-eye-o"></i></a>
                    </span>
                </div>
            </div>
        });
    }

    _close = ()=>{
        this.setState({visible:false});
    }


    _showImage=(url)=>{
        this.setState({visible:true,url:url});
    }
}